<template>
  <div>
    <el-button type="primary" @click="handleAddLawyer" style="margin-bottom: 10px">
      添加律师
    </el-button>
    <el-table :data="lawyerList" border>
      <el-table-column prop="lawyer_name" label="律师姓名" width="150" />
      <el-table-column prop="lawfirm_name" label="所属律所" width="200" />
      <el-table-column label="主办律师" width="100">
        <template #default="{ row }">
          <el-tag v-if="row.is_main === 1" type="success">是</el-tag>
          <el-tag v-else>否</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="{ row }">
          <el-button
            size="small"
            type="primary"
            @click="handleSetMainLawyer(row)"
            v-if="row.is_main !== 1"
          >
            设为主办
          </el-button>
          <el-button size="small" type="danger" @click="handleRemoveLawyer(row)">移除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
  // 定义律师接口
  interface Lawyer {
    id: number
    lawyer_id: number
    lawyer_name: string
    lawfirm_name: string
    is_main: number
    duty?: string
  }

  const props = defineProps<{
    lawyerList: Lawyer[]
  }>()

  const emit = defineEmits(['add-lawyer', 'set-main-lawyer', 'remove-lawyer'])

  const handleAddLawyer = () => {
    emit('add-lawyer')
  }

  const handleSetMainLawyer = (row: Lawyer) => {
    emit('set-main-lawyer', row)
  }

  const handleRemoveLawyer = (row: Lawyer) => {
    emit('remove-lawyer', row)
  }
</script>

<style scoped>
  /* 在这里添加组件特定的样式 */
</style>
